<template>
  <!-- 垂直布局 -->
  <el-container v-if="settingsStore.menuLayout === 'vertical'" class="layout-container layout-vertical">
    <el-aside :width="isCollapse ? '64px' : '240px'" class="transition-width">
      <Sidebar :is-collapse="isCollapse" />
    </el-aside>
    <el-container>
      <el-header class="header">
        <Navbar
          :is-collapse="isCollapse"
          @toggle-collapse="toggleCollapse"
          @lock="handleLock"
          @theme-click="drawerVisible = true"
        />
      </el-header>
      <tags-view v-if="settingsStore.showTags" />
      <el-main class="main-container">
        <router-view v-slot="{ Component }">
          <transition
            :name="settingsStore.pageAnimation"
            mode="out-in"
            appear
          >
            <keep-alive :include="cachedViews">
              <component
                :is="Component"
                :key="$route.fullPath"
              />
            </keep-alive>
          </transition>
        </router-view>
      </el-main>
      <Footer v-if="settingsStore.showFooter" />
    </el-container>
  </el-container>

  <!-- 水平布局 -->
  <el-container v-else-if="settingsStore.menuLayout === 'horizontal'" class="layout-container layout-horizontal">
    <el-container direction="vertical">
      <el-header class="header horizontal-header">
        <div class="header-left">
          <Logo :size="32" style="margin-right: 20px" />
          <Sidebar mode="horizontal" :is-collapse="false" />
        </div>
        <div class="header-right">
          <Navbar
            :is-collapse="isCollapse"
            :hide-collapse="true"
            @lock="handleLock"
            @theme-click="drawerVisible = true"
          />
        </div>
      </el-header>
      <tags-view v-if="settingsStore.showTags" />
      <el-main class="main-container">
        <router-view v-slot="{ Component }">
          <transition
            :name="settingsStore.pageAnimation"
            mode="out-in"
            appear
          >
            <keep-alive :include="cachedViews">
              <component
                :is="Component"
                :key="$route.fullPath"
              />
            </keep-alive>
          </transition>
        </router-view>
      </el-main>
      <Footer v-if="settingsStore.showFooter" />
    </el-container>
  </el-container>

  <!-- 混合布局 -->
  <el-container v-else-if="settingsStore.menuLayout === 'mixed'" class="layout-container layout-mixed">
    <el-container direction="vertical">
      <el-header class="header mixed-header">
        <div class="header-left">
          <Logo :size="32" style="margin-right: 20px" />
          <Sidebar mode="horizontal" :is-collapse="false" :level="1" />
        </div>
        <div class="header-right">
          <Navbar
            :is-collapse="isCollapse"
            :hide-collapse="true"
            @lock="handleLock"
            @theme-click="drawerVisible = true"
          />
        </div>
      </el-header>
      <el-container>
        <el-aside :width="isCollapse ? '64px' : '200px'" class="transition-width mixed-aside">
          <Sidebar :is-collapse="isCollapse" :level="2" />
        </el-aside>
        <el-container>
          <tags-view v-if="settingsStore.showTags" />
          <el-main class="main-container">
            <router-view v-slot="{ Component }">
              <transition
                :name="settingsStore.pageAnimation"
                mode="out-in"
                appear
              >
                <keep-alive :include="cachedViews">
                  <component
                    :is="Component"
                    :key="$route.fullPath"
                  />
                </keep-alive>
              </transition>
            </router-view>
          </el-main>
          <Footer v-if="settingsStore.showFooter" />
        </el-container>
      </el-container>
    </el-container>
  </el-container>

  <!-- 双列布局 -->
  <el-container v-else-if="settingsStore.menuLayout === 'double'" class="layout-container layout-double">
    <el-aside width="64px" class="first-aside">
      <Sidebar :is-collapse="true" :level="1" />
    </el-aside>
    <el-aside width="200px" class="second-aside">
      <Sidebar :is-collapse="false" :level="2" />
    </el-aside>
    <el-container>
      <el-header class="header">
        <Navbar
          :is-collapse="false"
          :hide-collapse="true"
          @lock="handleLock"
          @theme-click="drawerVisible = true"
        />
      </el-header>
      <tags-view v-if="settingsStore.showTags" />
      <el-main class="main-container">
        <router-view v-slot="{ Component }">
          <transition
            :name="settingsStore.pageAnimation"
            mode="out-in"
            appear
          >
            <keep-alive :include="cachedViews">
              <component
                :is="Component"
                :key="$route.fullPath"
              />
            </keep-alive>
          </transition>
        </router-view>
      </el-main>
      <Footer v-if="settingsStore.showFooter" />
    </el-container>
  </el-container>

  <!-- 设置抽屉 -->
  <setting-drawer
    v-model:visible="drawerVisible"
    v-model:isCollapse="isCollapse"
  />

  <!-- 添加锁屏组件 -->
  <lock-screen ref="lockScreenRef" />

  <!-- 水印组件 -->
  <Watermark />
</template>

<script setup lang="ts">
import TagsView from '@/components/TagsView/index.vue'
import SettingDrawer from '@/components/SettingDrawer/index.vue'
import Navbar from '@/layouts/components/Navbar/index.vue'
import Sidebar from './components/Sidebar/index.vue'
import Logo from './components/Sidebar/Logo.vue'
import LockScreen from '@/components/LockScreen/index.vue'
import Watermark from '@/components/Watermark/index.vue'
import Footer from '@/components/Footer/index.vue'

import { useSettingsStore, usePermissionStore } from "@/store";
import { useTagsViewStore } from '@/store/modules/tagsView'

const route = useRoute()
const tagsViewStore = useTagsViewStore()

const isCollapse = ref<boolean>(false)

const activeMenu = computed(() => route.path)

const toggleCollapse = () => {
  isCollapse.value = !isCollapse.value
}

const drawerVisible = ref(false)

const settingsStore = useSettingsStore()

// 缓存的视图
const cachedViews = computed(() => tagsViewStore.cachedViews)

// 初始化固定标签
onMounted(() => {
  tagsViewStore.initTags()
})

const lockScreenRef = ref()

const handleLock = () => {
  lockScreenRef.value?.lock()
}
</script>

<style scoped>
.layout-container {
  height: 100vh;
  overflow: hidden;
  background-color: var(--el-bg-color);
  color: var(--el-text-color-primary);
}

.transition-width {
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.el-aside {
  background-color: var(--el-bg-color);
  box-shadow: 2px 0 6px rgba(0, 21, 41, 0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.header {
  background-color: var(--el-bg-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  box-shadow: 0 1px 4px rgba(0,21,41,.08);
}

.main-container {
  padding: 16px;
  overflow-y: auto;
  background-color: v-bind('settingsStore.theme === "dark" ? "#0a0a0a" : "var(--el-bg-color)"');
}

/* 水平布局样式 */
.layout-horizontal {
  .horizontal-header {
    height: auto;
    padding: 0;
  }

  .header-left {
    display: flex;
    align-items: center;
    flex: 1;
    padding: 0 16px;
    background-color: var(--el-bg-color);
    border-bottom: 1px solid v-bind('settingsStore.theme === "dark" ? "#2d2d2d" : "#f0f0f0"');
  }

  .header-right {
    display: flex;
    align-items: center;
    padding: 0 16px;
    background-color: var(--el-bg-color);
  }
}

/* 混合布局样式 */
.layout-mixed {
  .mixed-header {
    height: auto;
    padding: 0;
  }

  .header-left {
    display: flex;
    align-items: center;
    flex: 1;
    padding: 0 16px;
    background-color: var(--el-bg-color);
    border-bottom: 1px solid v-bind('settingsStore.theme === "dark" ? "#2d2d2d" : "#f0f0f0"');
  }

  .header-right {
    display: flex;
    align-items: center;
    padding: 0 16px;
    background-color: var(--el-bg-color);
  }

  .mixed-aside {
    background-color: var(--el-bg-color);
  }
}

/* 双列布局样式 */
.layout-double {
  .first-aside {
    background-color: v-bind('settingsStore.menuTheme === "auto" ? (settingsStore.theme === "dark" ? "#0f0f0f" : "#f5f5f5") : (settingsStore.menuTheme === "dark" ? "#0f0f0f" : "#f5f5f5")');
    width: 64px !important;
  }

  .second-aside {
    background-color: v-bind('settingsStore.menuTheme === "auto" ? (settingsStore.theme === "dark" ? "#141414" : "#ffffff") : (settingsStore.menuTheme === "dark" ? "#141414" : "#ffffff")');
    width: 200px !important;
  }
}
</style> 